<template>
  <div id="pay-success-page">
    <div class="page-title"  :style="{top:(this.getSafeArea().top)+'px'}">
      <div id="back-button" @click="$router.push('/')">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span v-text="isSuccess===1?'支付成功':'支付失败'"></span>
    </div>
<!--    <div v-if="isSuccess===1">-->
<!--      <div class="title-bar">已购买商品信息</div>-->
<!--      <product-list-item v-for="(product,index) in productList" :key="index" :curr-product="product" :show-type="2"/>-->
<!--      <div class="c"></div>-->
<!--    </div>-->
    <div class="show-content" v-if="orderData.price>0">
<!--      <template v-if="isSuccess===0">-->
<!--        <i class="el-icon el-icon-error" style="font-size: 36px; color: #d43a26"></i>-->
<!--        <span>订单支付失败，没有库存!</span>-->
<!--      </template>-->
      <template v-if="isSuccess===1">
        <div class="pay-success-icon"></div>
        <div class="order-info">
          <div class="item">
            <div class="left">商品: </div>
            <div class="right">
              <div class="product-list">
                <div class="item" v-for="(product,index) in orderData.productList">
                  <div class="name">
                    <span class="ovd_s"  v-text="product.name+'×'+product.nums"></span>
                  </div>
<!--                  <div class="model" v-text="product.model"></div>-->
<!--                  <div class="nums" v-text="product.nums"></div>-->
                </div>
                <div class="c"></div>
              </div>
              <div class="c"></div>
            </div>
          </div>

          <div class="item" style="margin-top: 10px">
            <div class="left">付款总额: </div>
            <div class="right red b" v-text="'￥'+ToMoney(orderData.price)"></div>
          </div>

          <div class="item">
            <div class="left">支付方式: </div>
            <div class="right" v-text="payTypeArr[$route.query.payType]"></div>
          </div>

          <div class="item">
            <div class="left">订单编号: </div>
            <div class="right" v-text="$route.query.orderNo"></div>
          </div>


          <div class="c"></div>
        </div>
        <div align="center">
          <el-button icon="el-icon-view" type="danger" size="medium" @click="$router.push({name:'OrderDetail',query:{orderNo:$route.query.orderNo}})">订单详情</el-button>
        </div>
      </template>
    </div>
    <div align="center"></div>
  </div>
</template>

<script>
import ProductListItem from "../common/ProductListItem";
export default {
  name: "PaySuccess",
  components: {ProductListItem},
  data:function () {
    return {
      payTypeArr:dict.OrderPayArr,
      payTime:'2022-8-20 15:51:44',
      isSuccess:1,
      productList:[],
      orderData:{
        price:0,
        productList:[
          {name:'',nums:0}
        ]
      }
    }
  },
  mounted() {
    if(this.$route.query.type==='order'){
      this.backUrl='/OrderList'
      this.orderData=JSON.parse(decodeURI(this.$route.query.orderData))
    }
    // this.getOrderList()
  },
  methods:{
    getOrderList:function () {
      let $this=this
      $this.MyRequest($this.ApiDoNameShop+'Order/getList',{
        dateTime:this.$route.query.orderDateTime
      } , function (data) {
        $this.productList=[]
        data.list.forEach(function (value, index) {
          $this.productList.push({
            name:value.productName,
            image:value.productImage,
            price:value.productPrice,
            nums:value.nums,
          })
        })
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
      })
    }
  }
}
</script>

<style scoped>

</style>
